<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="public.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="html/text ; charset=UTF-8">
<script type="text/javascript" src="${contextPath}/csair/js/jquery-1.11.1.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/csair/js/soundmanager2.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/csair/js/init.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/csair/js/jquery.blockUI.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/csair/js/public.js" charset="UTF-8"></script>
<script type="text/javascript" src="${contextPath}/csair/js/pay2.js" charset="UTF-8"></script>
<link rel="stylesheet" href="${contextPath}/csair/css/public.css" />
<title>支付</title>
<style type="text/css"> 
#flightInfo2{ 
width:980px; 
min-height:300px; 
position:relative; 
margin:0px auto; 
border:0px solid #000; 
} 
#shade{ 
width:980px; 
height:330px; 
background-color:#AAAAAA; 
position:absolute; 
color:#fff;
z-index:999;
line-height: 330px;  
left:0px; 
top:0px; 
-moz-opacity:0.5;/*Firefox*/ 
opacity:0.5;/*Opera*/ 
filter:alpha(opacity=50); /*IE*/ 
} 

.newPayWayList {
    background: #f6fafc;
    height: 68px;
    border: none; 
}

.newPayWayList li {
    height: 100%;
    display: table;
    line-height: normal;
    float: left;
}

.newPayWayList li .pay-way-name {
    display: table-cell;
    color: #333333;
    border: none;
    text-align: center;
    vertical-align: middle;
    padding: 0;
    font-size: 16px;
    border-right: 1px solid #dbeff9;
    border-top: 1px solid #dbeff9;
    border-bottom: 1px solid #dbeff9;
}

.newPayWayList li.current .pay-way-name {
    border-top: 4px solid #008acb;
    border-bottom: none;
    background: #ffffff;
    height: 61px;
    color: #008acb;
    line-height: normal;
}
</style> 

</head>
	<body>
	
	<input type="hidden" id="hiddenOrderNum" value="${orderNo}">
	<input type="hidden" id="hiddenchuliTime1" value="${chuliTime1}">
	<input type="hidden" id="hiddennanhangTime1" value="${nanhangTime1}">
	<input type="hidden" id="hiddenchuliTime2" value="${chuliTime2}">
	<input type="hidden" id="hiddennanhangTime2" value="${nanhangTime2}">
		<div style="width: 1000px; margin: 0 auto; position: relative;">
		<a href="/iac/wca.html" style="float: right;margin-left: 10px; " id="toolbarCtrl" title="点此此处开启低视力人群工具条">开启低视力人群工具条</a>
		<!-- <a href="/iac/toolbar/help.html" style="float: right;" id="toolbarHelp" title="点此查看无障碍帮助和相关设置">无障碍帮助和相关设置</a>-->	
	
		</div>
		<div class="header">
			<div class="container">
				<img id="logo" src="${contextPath}/csair/img/logo.jpg" alt="标志" />
			</div>
		</div>
<%@include file="nav2.jsp"%>
<!--  请在<span id="count" style="font-weight: bold;color: red;"> 300 </span>秒内进行操作	-->
		<div class="container">
			<c:if test="${orderNo==null}">
			<div class="order_infos_wrap select_wrap navBlock">
				<div class="page_title">
					<h2>订单信息</h2>
					<div class="page_title_more">
						订单号：订单不存在！
					</div>
					<div class="clearboth"></div>
				</div>
			</div>
			</c:if>
			<c:if test="${orderNo!=null}">
			<div class="order_infos_wrap select_wrap">
				<div id="flightInfo">
					
				</div>
				
				<div id="flightInfo2">
				<div id = "shade">页面信息加载中......</div> 
					<div class="page_title">
						<h2>订单信息</h2>
						<div class="page_title_more">
							订单号：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						</div>
						<div class="clearboth"></div>
					</div>
					<div class="order_infos navBlock">
					<a href="##" class="question" style="float: left;" title="此处为订单信息请仔细阅读"><img src="/iac/csair/img/question.png"></a>
						<div class="order_infos_info">
							<ul class="pd_bt_10">
								<li>
									<div class="order_info1 orangefont">
										[单程]
									</div>
									<div class="order_info2">
										<div class="order_info_departure" id="city">
										
										</div>
									</div>
								</li>
								<li>
									<div class="order_info3">
										<span id="" class="order_info_date">
											起飞日期：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										</span>
										<span id="" class="order_info_time">
											&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; -&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
										</span>
										<span id="" class="order_info_flight">
											[
											<span class="orangefont">${fpi.flightCabin }</span>${fpi.flightCabinLevel }
											]
										</span>
									</div>
								</li>
							</ul>
					
							<ul class="">
								<li>
									<div class="order_info1">
										<span>乘客信息：</span>
									</div>
									<div class="order_info2">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grayfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
									</div>
								</li>
								<li>
									<div class="order_info3">
										身份证：
									</div>
								</li>
								
							</ul>
							<ul class="last_order_infos">
								<li>
									<div class="order_info1">
										联系信息：
									</div>
									<div class="order_info2">
										&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grayfont">[成人]</span>
									</div>
								</li>
								<li>
									<div class="order_info4">
										手机：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
								</li>
								<li>
									<div class="order_info4">
										邮箱：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									</div>
								</li>
							</ul>
						</div>
						
					</div>
					<div class="order_infos_price">
						<a href="##" title="总价:${fpi.price }">总价：<span class="flight_price orangefont">￥&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></a>
					</div> 		
				</div>
				
				<div class="order_tips">
					<h6 class="bluefont">*温馨提示：</h6>
					<p>
						1、航班价格变动频繁，剩余票数紧张，请您尽快支付，此订单限官网支付。<br />
						2、该订单仅能支付一次，如果支付失败，请重新下单，并以重新下单的价格为准。<br />
						3、您购买的航线仅能通过南航以下的网关进行支付，给您带来的不变，请您谅解。
					</p>
				</div>
				<div class="page_title">
					<h2 class="order_infos_pay">订单支付</h2>
					<div class="clearboth"></div>
				</div>
				<c:if test="${sessionScope.userType==1 }">
					<ul class="pay-way-list newPayWayList">
						<li data-value="3" onclick="clearchannletype(this);" class="current" ><div class="pay-way-name" style="border-left: 1px solid #bbd2e3;width:325px;"><a href="javascript:void(0)" title="快捷支付">快捷支付</a></div></li>
						<li data-value="2" onclick="clearchannletype(this);"><div class="pay-way-name" style="width:326px;"><a href="javascript:void(0)" title="微信支付">第三方支付(微信支付)</a></div></li>
						<li data-value="1" onclick="clearchannletype(this);"><div class="pay-way-name" style="border-right: 1px solid #bbd2e3;width:325px;"><a href="javascript:void(0)" title="余额支付">余额支付</a></div></li>
					</ul>
					<div class="order_infos order_infos_form navBlock order_div" id="kuaijiezhifuDiv">
						<div class="form_mid_inputs" style=" padding-right: 195px;">
							<label>卡类型：</label>
							<input type="radio" name="jjk" title="借记卡" id="jjk" value="借记卡" checked="checked" onclick="checkjjk()" onkeyup="jjkKeyup(event)"/><span>借记卡</span>
							<input type="radio" name="xyk" title="信用卡" id="xyk" value="信用卡" onclick="checkxyk()"  onkeyup="xykKeyup(event)"/><span>信用卡</span>
						</div>
						<div class="form_mid_inputs">
							<label>卡号：</label>
							<input type="text" name="accountNo" title="请输入卡号" id="accountNo" value="${accountNoInputValue }" placeholder="请输入卡号"/>
						</div>
						<div class="form_mid_inputs" id="EXPIRE" style="display:none; padding-right: 120px;">
							<label>有效期：</label>
								<select style="width:104px;color:#666;" id="EXPIREMONTH" name="EXPIREMONTH">
									<option value="0">月</option>
									<option value="01">01</option>
									<option value="02">02</option>
									<option value="03">03</option>
									<option value="04">04</option>
									<option value="05">05</option>
									<option value="06">06</option>
									<option value="07">07</option>
									<option value="08">08</option>
									<option value="09">09</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
								</select>
								<select style="width:101px;margin-left:10px;color:#666;" id="EXPIREYEAR" name="EXPIREYEAR">
									<option value="0" selected> 年 </option>
									<option value="2016"> 2016 </option>
									<option value="2017"> 2017 </option>
									<option value="2018"> 2018 </option>
									<option value="2019"> 2019 </option>
									<option value="2020"> 2020 </option>
									<option value="2021"> 2021 </option>
									<option value="2022"> 2022 </option>
									<option value="2023"> 2023 </option>
									<option value="2024"> 2024 </option>
									<option value="2025"> 2025 </option>
									<option value="2026"> 2026 </option>
									<option value="2027"> 2027 </option>
									<option value="2028"> 2028 </option>
									<option value="2029"> 2029 </option>
									<option value="2030"> 2030 </option>
									<option value="2031"> 2031 </option>
								</select>
						</div>
						<div class="form_mid_inputs" id="CVV2" style="display:none;">
							<label>CCV2：</label>
							<input type="password" name="CVV" title="请输入信用卡背后3位CVV2码" id="CVV" value="" placeholder="信用卡背后3位CVV2码"/>
						</div>
						<div class="form_mid_inputs">
							<label>持卡人姓名：</label>
							<input type="text" name="buyerName" title="请输入持卡人姓名" id="buyerName" value="${buyerNameInputValue }" placeholder="请输入持卡人姓名"/>
						</div>
						<div class="form_mid_inputs">
							<label>身份证号：</label>
							<input type="text" name="idCard" title="请输入身份证号" id="idCard" value="${idCardInputValue }" placeholder="请输入身份证号"/>
						</div>
						<div class="form_mid_inputs">
							<label>银行预留手机号：</label>
							<input type="text" name="mobile" title="请输入银行预留手机号" id="mobile" value="${mobileInputValue }" placeholder="请输入银行预留手机号"/>
						</div>
						<div class="form_mid_inputs">
							<button type="button" class="mobile_code_btn orangebtn" onclick="yzm()">点击获取验证码</button>
							<label>手机验证码：</label>
							<input type="text" name="codeName" title="请输入手机验证码" id="codeName" class="mobile_code" placeholder="请输入手机验证码" />
						</div>
						<div class="form_mid_btns">
							<button type="button" class="bluebtn" onclick="panduan()">立即支付</button>
						</div>
					</div>
					<div class="order_infos order_infos_form navBlock order_div" id="weixinerweimaDiv" style="display:none;">
						<img style="display:block;margin: auto;" id="weixinimg" src="">
						<div class="form_mid_btns">
							<button type="button" style="display:none;" id="completedpay" class="bluebtn" title="请扫描二维码进行支付，支付后点击这个确认按钮" onclick="weixinPaymentCompleted()">已完成支付</button>
						</div>
					</div>
					<div class="order_infos order_infos_form navBlock order_div" id="yuezhifuDiv" style="display:none;">
						<div class="form_mid_inputs">
							<input type="radio" id="yuEradio" title="选用余额支付请点击该按钮" style="display:none;vertical-align:text-bottom;" onclick="choiseYuEpay()">
							<label style="width:35px;" id="yuelabel">余额</label>
							<div id="yuExianshi" name="yuExianshi"  style="display:inline-block;" ></div>
							<div id="zhifupsdDiv" name="zhifupsdDiv" style="display:none;">
								<label style="width: 70px;">支付密码</label>
								<input id="zhifupsd" name="zhifupsd" title="请填写支付密码" placeholder="请填写支付密码" style="width:195px;">
							</div>
							<div class="form_mid_btns"  >
								<button type="button" id="yuEpayButton" title="使用余额立即支付" class="bluebtn" onclick="yuEpay()">立即支付</button>
							</div>
						</div>
					</div>
				</c:if>
				
				<c:if test="${sessionScope.userType!=1 }">
					<ul class="pay-way-list newPayWayList">
						<li data-value="3" onclick="clearchannletype(this);" class="current" ><div class="pay-way-name" style="border-left: 1px solid #bbd2e3;width:50%;"><a href="javascript:void(0)" title="快捷支付">快捷支付</a></div></li>
						<li data-value="2" onclick="clearchannletype(this);"><div class="pay-way-name" style="width:50%;"><a href="javascript:void(0)" title="微信支付">第三方支付(微信支付)</a></div></li>
					</ul>
					<div class="order_infos order_infos_form navBlock order_div" id="kuaijiezhifuDiv">
						<div class="form_mid_inputs" style=" padding-right: 195px;">
							<label>卡类型：</label>
							<input type="radio" name="jjk" title="借记卡" id="jjk" value="借记卡" checked="checked" onclick="checkjjk()" onkeyup="jjkKeyup(event)"/><span>借记卡</span>
							<input type="radio" name="xyk" title="信用卡" id="xyk" value="信用卡" onclick="checkxyk()"  onkeyup="xykKeyup(event)"/><span>信用卡</span>
						</div>
						<div class="form_mid_inputs">
							<label>卡号：</label>
							<input type="text" name="accountNo" title="请输入卡号" id="accountNo" value="${accountNoInputValue }" placeholder="请输入卡号"/>
						</div>
						<div class="form_mid_inputs" id="EXPIRE" style="display:none; padding-right: 120px;">
							<label>有效期：</label>
								<select style="width:104px;color:#666;" id="EXPIREMONTH" name="EXPIREMONTH">
									<option value="0">月</option>
									<option value="01">01</option>
									<option value="02">02</option>
									<option value="03">03</option>
									<option value="04">04</option>
									<option value="05">05</option>
									<option value="06">06</option>
									<option value="07">07</option>
									<option value="08">08</option>
									<option value="09">09</option>
									<option value="10">10</option>
									<option value="11">11</option>
									<option value="12">12</option>
								</select>
								<select style="width:101px;margin-left:10px;color:#666;" id="EXPIREYEAR" name="EXPIREYEAR">
									<option value="0" selected> 年 </option>
									<option value="2016"> 2016 </option>
									<option value="2017"> 2017 </option>
									<option value="2018"> 2018 </option>
									<option value="2019"> 2019 </option>
									<option value="2020"> 2020 </option>
									<option value="2021"> 2021 </option>
									<option value="2022"> 2022 </option>
									<option value="2023"> 2023 </option>
									<option value="2024"> 2024 </option>
									<option value="2025"> 2025 </option>
									<option value="2026"> 2026 </option>
									<option value="2027"> 2027 </option>
									<option value="2028"> 2028 </option>
									<option value="2029"> 2029 </option>
									<option value="2030"> 2030 </option>
									<option value="2031"> 2031 </option>
								</select>
						</div>
						<div class="form_mid_inputs" id="CVV2" style="display:none;">
							<label>CCV2：</label>
							<input type="password" name="CVV" title="请输入信用卡背后3位CVV2码" id="CVV" value="" placeholder="信用卡背后3位CVV2码"/>
						</div>
						<div class="form_mid_inputs">
							<label>持卡人姓名：</label>
							<input type="text" name="buyerName" title="请输入持卡人姓名" id="buyerName" value="${buyerNameInputValue }" placeholder="请输入持卡人姓名"/>
						</div>
						<div class="form_mid_inputs">
							<label>身份证号：</label>
							<input type="text" name="idCard" title="请输入身份证号" id="idCard" value="${idCardInputValue }" placeholder="请输入身份证号"/>
						</div>
						<div class="form_mid_inputs">
							<label>银行预留手机号：</label>
							<input type="text" name="mobile" title="请输入银行预留手机号" id="mobile" value="${mobileInputValue }" placeholder="请输入银行预留手机号"/>
						</div>
						<div class="form_mid_inputs">
							<button type="button" class="mobile_code_btn orangebtn" onclick="yzm()">点击获取验证码</button>
							<label>手机验证码：</label>
							<input type="text" name="codeName" title="请输入手机验证码" id="codeName" class="mobile_code" placeholder="请输入手机验证码" />
						</div>
						<div class="form_mid_btns">
							<button type="button" class="bluebtn" onclick="panduan()">立即支付</button>
						</div>
					</div>
					<div class="order_infos order_infos_form navBlock order_div" id="weixinerweimaDiv" style="display:none;">
						<img style="display:block;margin: auto;" id="weixinimg" src="">
						<div class="form_mid_btns">
							<button type="button" style="display:none;" id="completedpay" class="bluebtn" title="请扫描二维码进行支付，支付后点击这个确认按钮" onclick="weixinPaymentCompleted()">已完成支付</button>
						</div>
					</div>
				</c:if>
			</div>
			</c:if>
		</div>
		
		
		<%@include file="assigneealert.jsp"%>
		<span id="checkloadtime" onclick="loadtime()" >查看加载时间</span>
		<div id="loadtime" style="display:none;">${Time }</div>
		<%@include file="footer2.jsp"%>
		<%@include file="footer.jsp"%>
		
	</body>
</html>
